<template>
  <div class="index-container">
    <router-view></router-view>
    <van-tabbar v-model="active" route>
        <van-tabbar-item to="/index/home">
            <span>首页</span>
            <template #icon="props">
                <van-icon :name="props.active ? 'wap-home' : 'wap-home-o'" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/index/recommend">
            <span>演出推荐</span>
            <template #icon="props">
                <van-icon :name="props.active ? 'thumb-circle' : 'thumb-circle-o'" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/index/cart">
            <span>购物车</span>
            <template #icon="props">
                <van-icon :name="props.active ? 'shopping-cart' : 'shopping-cart-o'" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/index/me">
            <span>我的</span>
            <template #icon="props">
                <van-icon :name="props.active ? 'manager' : 'manager-o'" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
        data() {
            return {
                active: 0,
                icon: {
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                },
            };
        },
        // watch:{
        //     active:{
        //         immediate:true,
        //         handler(val){
        //             this.$router.push(['/index/home', '/index/recommend', '/index/cart', '/index/me'][val])
        //         }
        //     }
        // },
    };
</script>

<style lang="less" scoped>
    .index-container{
        height: 100%;
        .van-icon{
            color: #fc695f;
        }
        .van-tabbar-item--active{
            span{
                color: #fc695f;
            }
        }
    }
</style>